<!DOCTYPE html>
<html lang="en">

  <head>
    <base href="./">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
    <title>CoreUI Free Bootstrap Admin Template</title>
    <!-- Icons-->
    <link href="vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
    <link href="vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
    <link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
    <!-- Main styles for this application-->
    <link href="css/style.css" rel="stylesheet">
  </head>



<body>

    <div class="card"> 
 <div class="card-header"> 
  <i class="icon-drop"></i> Theme colors
 </div> 
 <div class="card-body"> 
  <div class="row"> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="bg-primary theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Brand Primary Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="bg-secondary theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Brand Secondary Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="bg-success theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Brand Success Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="bg-danger theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Brand Danger Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="bg-warning theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Brand Warning Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="bg-info theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Brand Info Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="bg-light theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Brand Light Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="bg-dark theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Brand Dark Color</h6> 
   </div> 
  </div> 
 </div> 
</div> 
<div class="card"> 
 <div class="card-header"> 
  <i class="icon-drop"></i> Grays
 </div> 
 <div class="card-body"> 
  <div class="row mb-3"> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="bg-gray-100 theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Gray 100 Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="bg-gray-200 theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Gray 200 Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="bg-gray-300 theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Gray 300 Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="bg-gray-400 theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Gray 400 Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="bg-gray-500 theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Gray 500 Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="bg-gray-600 theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Gray 600 Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="bg-gray-700 theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Gray 700 Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="bg-gray-800 theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Gray 800 Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="bg-gray-900 theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Gray 900 Color</h6> 
   </div> 
  </div> 
 </div> 
</div> 
<div class="card"> 
 <div class="card-header"> 
  <i class="icon-drop"></i> Additional colors
 </div> 
 <div class="card-body"> 
  <div class="row"> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="mb-3 bg-blue theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Blue Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="mb-3 bg-light-blue theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Light Blue Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="mb-3 bg-indigo theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Indigo Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="mb-3 bg-purple theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Purple Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="mb-3 bg-pink theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Pink Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="mb-3 bg-red theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Red Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="mb-3 bg-orange theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Orange Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="mb-3 bg-yellow theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Yellow Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="mb-3 bg-green theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Green Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="mb-3 bg-teal theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Teal Color</h6> 
   </div> 
   <div class="col-xl-2 col-md-3 col-sm-4 col-6 mb-4"> 
    <div class="mb-3 bg-cyan theme-color w-75 rounded mb-2" style="padding-top:75%"></div> 
    <h6>Cyan Color</h6> 
   </div> 
  </div> 
 </div> 
</div>
	
	

    <script src="../js/iframeResizer/iframeResizer.contentWindow.js"></script>
	<script src="vendors/jquery/js/jquery.min.js"></script>
<script src="vendors/popper.js/js/popper.min.js"></script>
<script src="vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
<script src="vendors/@coreui/coreui/js/coreui.min.js"></script>
<script src="js/colors.js"></script>

</body>

</html>